<template>
	<h1 class="bg-inverse text-xs-center p-y-2">{{$t("Home.title")}}</h1>
	<div class="p-x-1 p-y-2 text-xs-center">
		<label for="project-id">{{$t("Home.label")}}</label>
		<div class="input-group">
			<input
				v-model="projectId"
				type="text"
				id="project-id"
				class="form-control"/>
			<span class="input-group-btn">
				<button v-on:click="go" class="btn btn-primary">{{$t("Home.button")}}</button>
			</span>
		</div>
	</div>
	<div class="text-xs-center p-b-2">
		<button class="btn btn-sm btn-secondary" v-link="'https://www.lemonce.net'">
			{{$t("Home.back")}}
		</button>
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			projectId: 70
		};
	},
	methods: {
		go: function () {
			this.$router.go({
				name: 'taskList',
				params: {projectId: this.projectId}
			});
		}
	}
}
</script>

<style scoped lang="postcss">
h1 {
	font-size: 1.5rem;
}
@media (width >= 768px) {
	h1 {
		font-size: 2rem;
	}
}
@media (width >= 1000px) {
	h1 {
		font-size: 2.5rem;
	}
}
</style>
